<template >
    <div>
        <!-- mian bao xie  -->
        <div class="mbx">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>订单管理</el-breadcrumb-item>
                <el-breadcrumb-item>订单列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="tab-box">
            <div class="serch">
                <el-input placeholder="请输入内容" v-model="page.query" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </div>
            <!-- table  -->
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column fixed type="index">
                </el-table-column>
                <el-table-column prop="order_number" label="订单编号">
                </el-table-column>
                <el-table-column prop="order_price" label="订单价格">
                </el-table-column>
                <el-table-column prop="pay_status" label="是否付款">
                    <template slot-scope="scope">
                        <el-tag v-show="scope.row.pay_status == 1">已付款</el-tag>
                        <el-tag type="danger" v-show="scope.row.pay_status == 0">未付款</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="is_send" label="是否发货">
                </el-table-column>
                <el-table-column prop="create_time" label="下单时间">
                    <template slot-scope="scope">
                        {{ scope.row.create_time | Time }}
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" size="small"></el-button>
                        <el-button size="small" type="success" icon="el-icon-location" @click="addrss"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 分页  -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.pagenum"
            :page-sizes="[5, 10, 15, 20]" :page-size="page.pagesize" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>

        <!-- 模态框  -->
        <el-dialog title="物流信息" :visible.sync="dialogVisible" width="70%">
            <!-- <el-timeline :reverse="reverse">
                <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.timestamp">
                    {{ activity.content }}
                </el-timeline-item>
            </el-timeline> -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>



    </div>
</template>
<script>
import { getorders } from "../api/api"
export default {
    data() {
        return {
            // 表格 
            tableData: [],
            //分页
            page: {
                query: "",
                pagenum: 1,
                pagesize: 5
            },
            total: 10,
            //模态框
            dialogVisible: false,

        }
    },
    methods: {
        //数剧请求
        orders() {
            getorders(this.page).then(res => {
                console.log(res);
                this.tableData = res.data.goods
                this.total = res.data.total


            })
        },
        //分页
        handleSizeChange(val) {
            this.page.pagesize = val
            this.orders()
        },
        handleCurrentChange(val) {
            this.page.pagenum = val
            this.orders()
        },
        //点击出现模态框
        addrss() {
            this.dialogVisible = true
        }
    },
    //时间过滤器
    filters: {
        Time(val) {
            let time = new Date(val * 1000).toLocaleString()
            return time
        }
    },
    created() {
        this.orders()
    }
}
</script>
<style lang="scss" scoped>
.tab-box {
    margin-top: 15px;
    background-color: #fff;
    padding: 18px;
    box-sizing: border-box;
}

.serch {
    width: 600px;
    margin: 15px 0;
}
</style>